<template>
    <el-dialog :model-value="visible" :title="add?$t('user.addDialogTitle'):$t('user.editDialogTitle')" width="500px" :before-close="cb=>cancelForm('userFormRef')">
        <el-form
            ref="userFormRef"
            :model="userForm"
            :rules="validateRules"
            label-width="100px"
        >
            <el-form-item :label="$t('user.userName')" prop="userName">
                <el-input v-model="userForm.userName"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.userAccount')" prop="userAccount" v-if="add">
                <el-input v-model="userForm.userAccount"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.userAccount')" v-else>
                <el-input v-model="userForm.userAccount" disabled></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.userPassword')" prop="password" v-if="add">
                <el-input type="password" show-password v-model="userForm.password"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.confirmPassword')" prop="confirmPassword" v-if="add">
                <el-input type="password" show-password v-model="userForm.confirmPassword"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.organizationName')" prop="organizationId">
                <!-- <select-tree v-model="userForm.organizationId" :data="dropSelectList" :props="{label: 'organizationName',children: 'children',key:'organizationId'}" class="table-item"/> -->
                <el-tree-select v-model="userForm.organizationId" :data="dropSelectList" value-key="organizationId" :props="{label: 'organizationName',children: 'children'}" 
                   :render-after-expand='false' class="table-item" check-strictly />
            </el-form-item>
            <el-form-item :label="$t('user.phone')" prop="phone">
                <el-input v-model="userForm.phone"></el-input>
            </el-form-item>
            <el-form-item :label="$t('user.mail')" prop="mail">
                <el-input v-model="userForm.mail"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="cancelForm('userFormRef')" >{{$t('data.button.cancel')}}</el-button>
            <el-button type="primary" :loading="isSaveing" @click="submitForm('userFormRef')">{{$t('data.button.confirm')}}</el-button>
        </template>
    </el-dialog>
</template>
<script>
import userApi from '@/api/user'
export default {
    props:{
        form:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        add:{
            type:Boolean,
            default:false
        },
        visible:{
            type:Boolean,
            default:false
        },
        organizationOptions:{
            type:Array,
            default:()=>{
                return []
            }
        },
    },
    emits:['submit','close'],
    data(){
        let self=this
        return{
            userForm:this.form,
            isSaveing:false,
            validateRules:{
                userName:[
                    {
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                ],
                userAccount:[
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                    {
                        asyncValidator(rule, value, callback){
                            userApi.accountExist(self.userForm.userId,value).then(data=>{
                                if(!!data && data.code=='200' && data.data===true){
                                    callback();
                                }
                                else{
                                    callback(new Error("该账号已存在"));
                                }
                            })
                            .catch(()=>{
                                callback(new Error("该账号已存在"));
                            })
                        },
                        trigger: 'blur',
                    }
                ],
                password:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                    {
                        validator(rule, value) {
                            let re =/^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,30}$/;
                            return re.test(value);
                        },
                        message: '密码不符合规则（大小写+数字+特殊符号）',
                        trigger: 'blur',
                    }
                ],
                confirmPassword:[
                    {
                        required: true,
                        message: '请输入确认密码',
                        trigger: 'blur',
                    },
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },
                    {
                        validator(rule, value) {
                            return value === self.userForm.password;
                        },
                        message: '确认密码不正确',
                        trigger: 'blur',
                    }
                ],
                phone:[
                    {
                        max: 50,
                        message: '不能超过50字',
                        trigger: 'blur',
                    },
                ],
                mail:[
                    {
                        max: 200,
                        message: '不能超过200字',
                        trigger: 'blur',
                    },{
                        type: 'email',
                        message: '邮箱格式不正确',
                        trigger: 'blur',
                    },
                ]
            }
        }
    },
    watch:{
        form:{
            handler:function(){
                this.userForm=this.form
            },
            deep: true
        }
    },
    computed:{
        dropSelectList(){
            return this.organizationOptions || []
        }
    },
    methods:{
        submitForm(userFormRef){
            this.$refs[userFormRef].validate(valid=>{
                if(valid){
                    this.$emit('submit',this.userForm);
                }
            })
        },
        cancelForm(userFormRef){
            console.log('cancelForm',this.userForm)
            this.$refs[userFormRef].resetFields()
            this.$emit('close');
        },
    }
}
</script>
<style scoped>
.table-item{
    width:360px;
}
</style>